<template>
  <div class="order-box">
    <van-nav-bar fixed title="我的订单" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>

    <van-tabs v-model="index">
      <van-tab v-for="item in tabs" :key="item.text" :title="item.text"></van-tab>
    </van-tabs>

    <!-- 订单列表 -->
    <van-list :offset="80" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in list" :key="item.orderId">
        <template #default>
          <div>
            <p>
              订单时间：{{ item.createTime }} ----
              {{ item.orderStatusString }}
            </p>
            <div v-for="v in item.newBeeMallOrderItemVOS" :key="v.goodsId">
              <img style="width: 180px" :src="v.goodsCoverImg" alt="" />
              <p>名称：{{ v.goodsName }}</p>
              <p>单价：{{ v.sellingPrice }}</p>
            </div>
            <p>总价格：{{ item.totalPrice }}</p>
          </div>
        </template>
      </van-cell>
    </van-list>

  </div>
</template>

<script>
import { getOrderList } from "../../api/index.js";
export default {
  name: "Order",
  props: [],
  data() {
    return {
      tabs: [
        {
          text: "全部",
          status: "",
        },
        {
          text: "待付款",
          status: "0",
        },
        {
          text: "待确认",
          status: "1",
        },

        {
          text: "代发货",
          status: "2",
        },
        {
          text: "已发货",
          status: "3",
        },
        {
          text: "交易完成",
          status: "4",
        },
      ],
      list: [],  // 列表中的数据
      loading: false,  // 
      finished: false, // 是否加载完毕
      pageNumber: 1, // 获取第几页面的数据
      status: "", // 订单的状态
      index: 0, // 不同的tab
    };
  },
  methods: {
    onLoad() {
      console.log("onload...");

      getOrderList(this.pageNumber++, this.status).then(res => {
        // console.log("res=>", res);
        if (res.data.list.length === 0) {
          this.finished = true;
        }
        this.list = this.list.concat(res.data.list)
        this.loading = false;
      })


      // 模拟ajax
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

      //   // 加载状态结束
      //   // 当loading为false时，还会触发onLoad
      //   this.loading = false;

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
    }
  },
  watch: {
    index(val) {
      // console.log(val);
      this.status = this.tabs[val].status;
      this.pageNumber = 1;
      this.list = [];
      this.finished = false;
      this.onLoad(); // 重新发请求
    }
  }
};
</script>

<style lang="less" scoped>
.order-box {
  .van-tabs {
    position: fixed;
    top: 1.2rem;
    width: 100%;
    left: 0;
    z-index: 300
  }

  .van-list {
    padding-top: 2.2rem;
  }
}
</style>